<template>
    <el-tabs v-model="activeName" class="flexClass">
        <el-tab-pane label="分配提成" name="first" style="height:100%">
            <div class="mainDiv">
                <el-table :data="tichenglist" style="width: 100%;" height="250" show-summary :summary-method="getSum">
                    <el-table-column prop="type" label="品项类型" width="98">
                        <template scope="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.type == 1">产品</el-tag>
                            <el-tag size="mini" type="warning" v-if="scope.row.type == 2">项目</el-tag>
                            <el-tag size="mini" type="primary" v-if="scope.row.type == 3">卡</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="typename" label="品项名称" width="130" :show-overflow-tooltip="showOwer"></el-table-column>
                    <el-table-column prop="consumetype" label="消费类型">
                        <template scope="scope">
                            <el-tag size="mini" type="success" v-if="scope.row.consumetype == 1">普通消费</el-tag>
                            <el-tag size="mini" type="danger" v-else-if="scope.row.consumetype == 2">卡项消费</el-tag>
                            <el-tag size="mini" type="gray" v-else>暂存消费</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="原价"></el-table-column>
                    <el-table-column prop="num" label="数量">
                    </el-table-column>
                    <el-table-column prop="discount" label="折扣（0-1）" width="130">
                    </el-table-column>
                    <el-table-column prop="amount" label="小计">
                    </el-table-column>
                    <el-table-column prop="xianjinticheng" label="现金提成">
                    </el-table-column>
                    <el-table-column prop="kahaoticheng" label="卡耗提成">
                    </el-table-column>
                </el-table>
                <el-button type="primary" icon="plus" size="small" @click="adduser" style="margin:5px 0px; width: 80px">员工</el-button>
                <el-table :data="fenpeilist" style="width: 100%" show-summary :summary-method="getSummaries" height="100%">
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="xianjinyeji" label="现金业绩">
                    </el-table-column>
                    <el-table-column prop="kahaoyeji" label="卡耗业绩">
                    </el-table-column>
                    <el-table-column prop="xianjinticheng" label="现金提成">
                        <template scope="scope">
                            <el-input size="small" style="width:90px" v-model="scope.row.xianjinticheng" v-show="scope.row.addtype == 0"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kahaoticheng" label="卡耗提成">
                        <template scope="scope">
                            <el-input size="small" style="width:90px" v-model="scope.row.kahaoticheng" v-show="scope.row.addtype == 0"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="qitaticheng" label="其他提成">
                        <template scope="scope">
                            <el-input size="small" style="width:90px;margin:5px" v-model="scope.row.qitaticheng" v-show="scope.row.addtype == 1"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template scope="scope">
                            <el-button type="danger" size="mini" @click="deleterow(scope.$index, fenpeilist)" :disabled="scope.row.addtype == 0">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding: 10px">
                    <el-button type="danger" class="fr" style="float: left;" @click="goto(1)">上一步</el-button>
                    <el-button style="float: left;" @click="dayin" v-qx="quanxian.dayin">打印</el-button>
                    <el-button type="primary" style="float: right" icon="upload2" @click="fenpeiticheng(0)" v-show="order.status == 1" v-qx="quanxian.fenpei">保存分配</el-button>
                    <el-button type="primary" style="float: right" @click="goto(3)" v-show="order.status == 2">下一步</el-button>
                    <el-button type="primary" style="float: right" @click="fenpeiticheng(1)" v-show="order.status == 2" v-qx="quanxian.chongxinfenpei">重新分配</el-button>
                    <el-button type="danger" style="float: right" @click="quxiaofenpei" v-show="order.status == 2" v-qx="quanxian.fanfenpei">取消分配</el-button>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="订单详情" name="second">
            <orderInfo :order="order"></orderInfo>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import C from '#/src/common/common.js'
import orderInfo from './orderInfo.vue'

export default {
    name: 'addOpenCard',
    props: ['order', 'tichenglist', 'fenpeilist'],
    data() {
        return {
            // 结账
            paylist: [],
            yejilist: [],
            //杂项
            showOwer: true,
            activeName: 'first',
            quanxian: {
                add: 'opencards_add',
                jiezhang: 'opencards_jiezhang',
                fanjiezhang: 'opencards_fan',
                dayin: 'opencards_print',
                fenpei: 'opencards_fen',
                fanfenpei: 'opencards_fanfen',
                chongxinfenpei: 'opencards_chongxin'
            }
        }
    },
    methods: {
        deleterow: C.deleterow,
        getSum(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }
                if (index == 7 || index == 8) {
                    const values = data.map(item => Number(item[column.property]))
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr)
                            if (!isNaN(value)) {
                                return prev + curr
                            } else {
                                return prev
                            }
                        }, 0)
                        sums[index] = sums[index].toFixed(2)
                    } else {
                        sums[index] = 'N/A'
                    }
                }
            })
            return sums
        },
        adduser: async function() {
            let data = await C.openBrowserWindow('/selectAppUser', {}, {
                width: 1200,
                height: 860,
                transparent: true,
                frame: false,
                // openDevTools: true,
                useSpa: true,
                spaModel: 'shop'
            })
            if (data) {
                let ot = this.order.ordertype == 1 ? 'KKD' : this.order.ordertype == 2 ? 'LSD' : 'CZD'
                data.forEach((row) => {
                    // 判断是否重复
                    if (C.inarray({ userid: row.id }, this.fenpeilist) === -1) {
                        this.fenpeilist.push({
                            id: '',
                            xianjintichengbi: 0,
                            kahaotichengbi: 0,
                            xianjinticheng: 0,
                            kahaoticheng: 0,
                            xianjinyeji: 0,
                            kahaoyeji: 0,
                            name: row.name,
                            addtype: 1,
                            orderid: this.order.id,
                            userid: row.id,
                            xiaozuid: row.xiaozuid,
                            bumenid: row.bumenid,
                            qitaticheng: 0,
                            ordertype: ot,
                            guestid: this.order.guestid,
                            addtime: this.order.addtime,
                            shopid: this.order.departmentid,
                            fuwutype: 0,
                            shougongticheng: 0
                        })
                    }
                })
            }
        },
        getSummaries: function(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }

                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    sums[index] = sums[index].toFixed(2)
                    sums[index] += ' 元'
                } else {
                    sums[index] = 'N/A'
                }
            })
            return sums
        },
        fenpeiticheng: async function(r) {
            // 进行判断
            // return false 
            let url = r ? '/shop/kaidancheck/chongxinfenpei' : '/shop/kaidancheck/fenpeiticheng'
            let data = { userinfo: JSON.stringify(this.fenpeilist), orderid: this.order.id, ordertype: this.order.ordertype }

            let e = false
            if (this.fenpeilist.length <= 0) {
                C.confirm('该单据将不产生任何提成，确定继续吗？', async() => {
                    let res = await C.ajax(url, data, 'post')
                    if (res) {
                        C.success(res.data.info)
                        this.goto(3)
                    }
                })
            } else {
                this.fenpeilist.forEach((row) => {
                    if (row.xianjinticheng < 0 || row.kahaoticheng < 0 || row.shougongticheng < 0 || row.qitaticheng < 0) e = true
                })
                if (e) {
                    C.error('数据格式填写不正确')
                    return false
                }
                let res = await C.ajax(url, data, 'post')
                if (res) {
                    C.success(res.data.info)
                    this.goto(3)
                }
            }
        },
        dayin: async function() {
            await C.openBrowserWindow('/printOpenCard', { id: this.order.id }, { width: 245, height: 900, useSpa: true, spaModel: 'print' })
        },
        quxiaofenpei: function() {
            C.confirm('确定要撤销吗？', async() => {
                let data = await C.ajax('/shop/kaidancheck/fanfenpeiticheng', { id: this.order.id }, 'post')
                if (data) {
                    C.success(data.data.info)
                    this.goto(2)
                }
            })
        },
        goto (index) {
            this.$emit('goto', {index: index})
        }
    },
    mounted: async function() {
    },
    components: { orderInfo }
}
</script>
<style>
.flexClass{
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.el-tabs__content{
    height: 100%;
}
</style>